<template>
    <section>
        <el-form ref="configItemData" :model="configItemData" label-width="93px" size="small">
            <el-form-item label="项目名" required prop="name">
                <el-col :span="4">
                    <!--<el-input v-model="configItemData.name" disabled></el-input>-->
                    <el-tag size="small"> {{configItemData.name}}</el-tag>
                </el-col>

            </el-form-item>
            <el-form-item label="项目描述">
                <el-col :span="16">
                    <el-input v-model="configItemData.describe"  type="textarea" :rows="2"></el-input>
                </el-col>
            </el-form-item>
            <el-form-item label="git源码" >
                <el-col :span="16">
                    <!--<el-input v-model="configItemData.giturl" disabled></el-input>-->
                    <el-tag size="small"> {{configItemData.giturl}}</el-tag>
                </el-col>
            </el-form-item>
            <el-form-item label="分支" required>
                <el-col :span="4">
                    <el-input v-model="configItemData.branch" ></el-input>
                </el-col>

            </el-form-item>

            <el-form-item label="代码环境" >
                <el-radio-group v-model="configItemData.codelang">
                    <el-radio label="java">Jdk</el-radio>
                    <el-radio label="golang">Golang</el-radio>
                    <el-radio label="python">Python</el-radio>
                    <el-radio label="php">Php</el-radio>
                </el-radio-group>
            </el-form-item>

                <el-form-item label="编译选项" required>
                    <el-col :span="8">
                        <el-input v-model="configItemData.compile"></el-input>
                    </el-col>

                </el-form-item>



            <el-form-item label="部署策略" required>
                <!--<el-select v-model="configItemData.deploymode" placeholder="请选择活动区域" disabled >-->
                    <!--<el-option label="ansible 批量部署" value="ansible"></el-option>-->
                    <!--<el-option label="K8s 集群" value="K8s"></el-option>-->

                <!--</el-select>-->
                <el-tag size="small"> {{configItemData.deploymode}}</el-tag>
            </el-form-item>

            <div v-if="configItemData.deploymode === 'ansible'">

                <el-form-item label="服务器组" required>
                    <el-select v-model="configItemData.hosts" placeholder="请选择负载集群"  @focus="chooseHosts">
                        <el-option
                                v-for="item in hostsoptions"
                                :label="item.name"
                                :value="item.name">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="Ansible-yaml" required>
                    <el-col :span="16">
                        <edit-yaml ></edit-yaml>
                    </el-col>
                </el-form-item>


            </div>

            <div v-if="configItemData.deploymode === 'K8s'">
                <el-form-item label="">
                    <el-tag type="success">Docker 配置</el-tag>
                </el-form-item>
                <el-form-item label="镜像地址">
                    <el-row >
                        <el-col :span="4"><el-input v-model="configItemData.imageUrl" placeholder="Repositoriy:habor.company.net"></el-input></el-col>
                        <el-col :span="4"><el-input v-model="configItemData.imageWareHouse" placeholder="Project:ud-family "></el-input></el-col>
                        <el-col :span="4"><el-input v-model="configItemData.imageName" placeholder="ImageName:item-test "></el-input></el-col>
                        <el-col :span="4"><el-input v-model="configItemData.imageVersion" placeholder="Version:latest "></el-input></el-col>
                    </el-row>
                </el-form-item>
                <el-form-item label="Dockerfile">
                    <el-col :span="16">
                        <edit-yaml ></edit-yaml>
                    </el-col>
                </el-form-item>
                <el-form-item label="K8s 部署">

                    <el-row >
                        <el-col :span="4">
                            <el-select v-model="configItemData.k8stemplate" placeholder="请选择活动区域">
                                <el-option label="基础模板" value="ansible1"></el-option>
                                <el-option label="多镜像模板" value="ansible2"></el-option>
                                <el-option label="nfs-volument" value="ansible3"></el-option>
                                <el-option label="host-volument" value="K8s"></el-option>
                            </el-select>
                        </el-col>
                        <el-col :span="2"><el-button type="success">查看</el-button></el-col>
                        <el-col :span="1" ><el-input v-model="configItemData.containReplice" placeholder="副本数"></el-input></el-col>
                        <el-col :span="2" :offset="1"><el-input v-model="configItemData.k8snamespace" placeholder="Namespace "></el-input></el-col>
                        <el-col :span="2" :offset="1"><el-input v-model="configItemData.containPort" placeholder="Port"></el-input></el-col>
                    </el-row>
                </el-form-item>
            </div>



            <el-form-item>
                <el-button @click="saveItem" type="primary" >保存</el-button>
                <el-button @click="closeThisTab">取消</el-button>

            </el-form-item>
        </el-form>

    </section>
</template>
<script>
    import { getHostList,SaveDeployConfig,LoadWorkspaceFile } from '../../api/api'
    import editYaml from '../../components/edit/edityaml300.vue'
    import $ from 'jquery' //引入jquery 检测输入yaml内容是否格式错误

    export default {
        props: {
            deployItem: Object,

        },
        data() {
            return {

                configItemData: {
                    name: '',
                    describe: "",
                    giturl: "",
                    branch: "",
                    lang: "",  //为啥不能用"Jdk"
                    compile: "mvn clean package -P test",
                    deploymode: 'ansible',
                    hosts: '',
                    options: [],
                    ansibleContent: "",  //ansible 部署


                    k8stemplate: '',
                    date1: '',
                    date2: '',
                    delivery: false,
                    type: [],
                    resource: '',
                    desc: '',
                    imageUrl: "habor.company.com",
                    imageWareHouse: "project",
                    imageName: "item-test",
                    imageVersion: "v1",
                    containReplice: "",
                    k8snamespace:"",
                    containPort: "",
                },
                hostsoptions:[],
                rules: {
                    name: [
                        { required: true, message: '请输入项目名-英文字母', trigger: 'blur' },
                        { min: 3, max: 15, message: '长度在 3 到 5 个字符', trigger: 'blur' }
                    ],

                },

            }
        },
        methods: {
            saveItem() {
                console.log('submit!');
                console.log(this.configItemData.deploymode);
                var cm = $(".yamlcode300  .CodeMirror")[0].CodeMirror;  //怕多个codemirror引起的混乱
                var doc = cm.getDoc();
                this.configItemData.ansibleContent = doc.getValue().toString()

                let itemparm = {
                    name: this.configItemData.name,
                    deploymode: this.configItemData.deploymode,
                    describe: this.configItemData.describe,
                    giturl : this.configItemData.giturl,
                    branch : this.configItemData.branch,
                    codelang :this.configItemData.codelang,
                    compile : this.configItemData.compile,
                    hosts : this.configItemData.hosts,
                    yamlcontent: this.configItemData.ansibleContent
                }

                SaveDeployConfig(itemparm).then((res) => {
                    console.log("debug here")
                    console.log(res.code)
                    if (res.code === 400) {
                        this.$message({
                            message: "Warning: 保存失败 " + res.message ,
                            type: 'success',
                            duration: 1000,
                        });
                    }else {
                        this.$message({
                            message: " 保存成功 "  ,
                            type: 'success',
                            duration: 1000,
                        });

                        this.$emit('close_tab')
                    }
                })


            },
            chooseHosts(){

                console.log("debug herer configItemData.options",this.configItemData.options)

                getHostList().then((res) => {
                        console.log(res.data.hosts)
                        this.hostsoptions = res.data.hosts
                        console.log("debug herer configItemData.options",this.configItemData.options)

                    }
                )
            },
            closeThisTab() {
                this.$emit('close_tab')
            },
            loadYaml(path) { //远程加载模板文件

                console.log("test workspce path " , path)

                var cm = $(".yamlcode300  .CodeMirror")[0].CodeMirror;  //怕多个codemirror引起的混乱
                var doc = cm.getDoc();
                doc.setValue("")
                LoadWorkspaceFile(path).then((res) => {
                            console.log(res)
                            doc.setValue(res)
                        }
                    )

            },

        },
        components: {
            editYaml,
        },
        mounted() {
            console.log(".......")
            console.log("this item is",this.deployItem) //ojbk continue
            this.configItemData = this.deployItem
            let path = this.deployItem.yamlpath + "/" + this.deployItem.name + ".yaml"
            this.loadYaml(path)

            console.log(".......")
        },

    }
</script>
<style>
    .hosts-select {
        margin-top:5px;
        margin-bottom:5px;
    }
</style>